<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="queryForm" class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="queryForm.title" placeholder="标题"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="handleList">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border style="width: 100%" :height='350'>
      <el-table-column prop="id" label="编号">
      </el-table-column>
      <el-table-column prop="title" label="标题">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="text-align: center;margin-top: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryForm.page"
        :page-sizes="[5, 10, 20, 50]" :page-size="queryForm.rows" layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total">
      </el-pagination>
    </div>

    <el-dialog @close="handledialogMergeFormClosed" :title="dialogTitle" :visible.sync="dialogMergeForm">
      <el-form :model="mergeForm" :rules="rules" ref="mergeForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="mergeForm.title"></el-input>
        </el-form-item>
        <el-form-item label="内容" prop="body">
          <el-input type="textarea" v-model="mergeForm.body"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogMergeForm = false">取 消</el-button>
        <el-button type="primary" @click="handleMerge">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogTitle: '文章新增',
        tableData: [],
        dialogMergeForm: false,
        queryForm: {
          title: null,
          page: 1,
          rows: 5,
          total: -1
        },
        mergeForm: {
          id: null,
          title: null,
          body: null
        },
        rules: {
          id: [],
          title: [{
              required: true,
              message: '请输入标题',
              trigger: 'blur'
            },
            {
              min: 2,
              max: 200,
              message: '长度在 2 到 200 个字符',
              trigger: 'blur'
            }
          ],
          body: [{
            required: true,
            message: '请输入文章内容',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.doList()
    },
    methods: {
      doList: function() {
        this.axios.post(this.axios.urls.SYS_ARTICLES_LIST, this.queryForm).then((response) => {
          // console.log(response);
          this.tableData = response.data.result;
          this.queryForm.page = response.data.page
          this.queryForm.rows = response.data.rows
          this.queryForm.total = response.data.total
        });
      },
      handleList: function() {
        this.doList()
      },
      handleSizeChange(rows) {
        console.log('rows=%s', rows);
        this.queryForm.page = 1
        this.queryForm.rows = rows
        this.doList()
      },
      handleCurrentChange(page) {
        this.queryForm.page = page
        this.doList()
      },
      handleDelete: function(index, row) {
        // console.log(row.id);
        this.$confirm('您确定要删除此记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.axios.post(this.axios.urls.SYS_ARTICLES_DEL, {
            id: row.id
          }).then((response) => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.doList()
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      handleAdd: function(index, row) {
        this.dialogTitle = '文章新增'
        this.dialogMergeForm = true
      },
      handleEdit: function(index, row) {
        console.log('handleEdit')
        this.dialogTitle = '文章编辑'
        this.mergeForm.id = row.id
        this.mergeForm.title = row.title
        this.mergeForm.body = row.body

        this.dialogMergeForm = true
      },
      handledialogMergeFormClosed: function() {
        this.$refs['mergeForm'].resetFields();
        this.mergeForm.id = null
        this.mergeForm.title = null
        this.mergeForm.body = null

      },
      handleMerge: function() {
        this.axios.post(this.axios.urls.SYS_ARTICLES_MERGE, this.mergeForm).then((response) => {
          let data = response.data
          this.$message({
            message: data.message,
            type: 'success',
          })
          if (!this.mergeForm.id) {
            this.mergeForm.title = null
            this.mergeForm.body = null
          }
          this.doList()
        })
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .userRole {
    width: 100%;
  }
</style>
